<template>
	<view class="item-content">
		<view class="c-gray ta-center ptb-20">11-12 17:55</view>
		<!-- 应聘者 -->
		<view v-if="data.from=='applicant'" class="applicant-box">
			<view class="placeholder"></view>
			<view class="content">
				<c-text v-if="data.message_type=='text'" :content="data.content" />
				<c-image v-else-if="data.message_type=='image'" />
			</view>
			<view class="avatar">
				<van-image width="40" height="40" :src="require('@/static/default_avatar.png')" />
			</view>
		</view>
		<!-- 招聘者 -->
		<view v-else-if="data.from=='interviewer'" class="interviewer-box">
			<view class="avatar"><van-image width="40" height="40" :src="require('@/static/default_avatar.png')" />
			</view>
			<view class="content">
				<c-text v-if="data.message_type=='text'" :content="data.content" />
				<c-image v-else-if="data.message_type=='image'" />
			</view>
			<view class="placeholder"></view>
		</view>
	</view>
</template>

<script>
	import CText from './item-content/c-text'
	import CImage from './item-content/c-image'
	export default {
		components: {
			CText,
			CImage
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			}
		},
	}
</script>

<style lang="scss" scoped>
	.item-content {
		.applicant-box {
			display: flex;
			flex-wrap: nowrap;
			gap: 20rpx;

			.content {
				flex: 1;
				// background-color: #07C160;
				background-color: #95EC69;
				border-radius: 20rpx;
				border-bottom-right-radius: 0;
				padding: 20rpx;
				color: #000;
				line-height: 1.8;
			}
		}

		.interviewer-box {
			display: flex;
			flex-wrap: nowrap;
			gap: 20rpx;

			.content {
				flex: 1;
				background-color: #fff;
				border-radius: 20rpx;
				border-bottom-left-radius: 0;
				padding: 20rpx;
				line-height: 1.8;
			}
		}

		.placeholder {
			width: 80rpx;
		}

		.avatar {
			align-self: flex-end;
		}
	}
</style>